<template>
	<view class="bg-white">
		<view class="block">
			<view class="title">
				我的账户
			</view>
			<view class="content">
				<view class="my">
					我的账户余额：{{kaCoin}} 豆
				</view>
			</view>
		</view>
		<view class="block">
			<view class="title">
				充值金额
			</view>
			<view class="content">
				<view class="amount">
					<view class="list">
						<view class="box" v-for="(amount,index) in amountList" :key="index" @tap="select(amount,index)" :class="{'on':index == inputAmount}">
							<view style='font-size: 38rpx;margin: 10rpx 0;'>{{amount.constantKey/10}}元</view>
							<view style='font-size: 24rpx;'>{{amount.constantKey}}豆</view>
							<view style='font-size: 24rpx;'>送{{amount.constantValue}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="block">
			<view class="title">
				选择支付方式
			</view>
			<view class="content">
				<view class="pay-list">
					<view class="row">
							<view class="left">
								<text class="iconfont icon-wechat"></text>
							</view>
							<view class="center">
								微信支付
							</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="pay">
			<view class="btn" @tap="doDeposit">立即充值</view>
			<view class="tis">
				点击立即充值，即代表您同意<view class="terms">
					《条款协议》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {coinRecharge,coinStartRecharge,confirmRecharge} from '@/api/api.js'
	export default {
		data() {
			return {
				inputAmount:0,//金额
				amountList:[],//预设3个可选快捷金额
				paytype:'alipay',//支付类型
				kaCoin:0,
				amount:{}
			};
		},
		onLoad(e) {
			if(e.kaCoin){
				this.kaCoin = Number(e.kaCoin);
			}
			coinRecharge().then(res=>{
				if(res.code==200){
					this.amountList=res.data;
					this.amount = res.data[0];
				}
			})
		},
		methods:{
			select(amount,index){
				this.amount = amount;
				this.inputAmount = index;
			},
			doDeposit(){
				uni.showLoading({
					title:'支付中...',
					mask:true
				});
				let that = this;
				coinStartRecharge({
					constantId:this.amount.id
				}).then(res=>{
					if(res.code==200){
						let obj = res.data.prePayInfo;
						uni.requestPayment({
							provider:"wxpay",
							timeStamp:obj.timeStamp,
							nonceStr:obj.nonceStr,
							'package':obj.packageValue,
							paySign:obj.paySign,
							signType:obj.signType,
							success(e) {
								if(e.errMsg=='requestPayment:ok'){
									confirmRecharge({
										outTradeNo:res.data.outTradeNo
									}).then(payRes=>{
										uni.hideLoading();
										uni.showToast({
											icon:"success",
											title:"充值成功"
										})
										that.kaCoin += Number(that.amount.constantKey);
										that.kaCoin += Number(that.amount.constantValue);
										uni.$emit('setKaCoin',{kaCoin:that.kaCoin});
									})
								}
							},
							fail() {
								that.kaCoin += Number(that.amount.constantKey);
								that.kaCoin += Number(that.amount.constantValue);
								uni.$emit('setKaCoin',{kaCoin:that.kaCoin});
								uni.hideLoading();
							}
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.bg-white{
		height: 100vh;
	}
	.block{
		width: 94%;
		padding: 20upx 3%;
		.title{
			width: 100%;
			font-size: 34upx;
		}
		.content{
			.my{
				width: 100%;
				height: 120upx;
				display: flex;
				align-items: center;
				font-size: 30upx;
				border-bottom: solid 1upx #eee;
			}
			.amount{
				width: 100%;
				
				.list{
					display: flex;
					// justify-content: space-between;
					flex-wrap: wrap;
					padding: 20upx 0;
					.box{
						width: 30%;
						height: 150upx;
						text-align:center;
						margin: 10rpx;
						// display: flex;
						// justify-content: center;
						// align-items: center;
						border-radius: 10upx;
						box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.05);
						font-size: 28upx;
						background-color: #f1f1f1;
						color: 333;
						&.on{
							background-color: $u-type-warning;
							color: #fff;
						}
						span{
							font-size: 16upx;
						}
					}
				}
			}
			.pay-list{
				width: 100%;
				border-bottom: solid 1upx #eee;
				.row{
					width: 100%;
					height: 120upx;
					display: flex;
					align-items: center;
					.left{
						width: 65upx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						text{
							font-size: 50rpx;
							color: #07c160;
						}
					}
					.center{
						width: 100%;
						font-size: 30upx;
					}
					.right{
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}
	.pay{
		margin-top: 20upx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		.btn{
			width: 70%;
			height: 80upx;
			border-radius: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: $u-type-warning;
			box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.2);
		}
		.tis{
			margin-top: 10upx;
			width: 100%;
			font-size: 24upx;
			display: flex;
			justify-content: center;
			align-items: baseline;
			color: #999;
			.terms{
				color: #5a9ef7;
			}
		}
	}
</style>
